<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>结算</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<div th:insert="head.html"></div>


<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">


    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <select v-model="selectedAddressId" class="form-control" name="address">
                    <option value="-1">请选择收货地址</option>
                    <option v-for=" a in addressList" :value="a.id">{{a.province}} {{a.city}} {{a.area}} {{a.reciver}}
                        {{a.tel}}
                    </option>
                </select>
            </div>
            <div class="col-md-4">
                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" @click="clearAddForm">新增地址
                </button>
            </div>
        </div>
    </div>
    <br/>

    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <table class="table">
                        <tr>
                            <th>图书名称</th>
                            <th>图书图片</th>
                            <th>图书单价(元)</th>
                            <th>购买数量</th>
                            <th>小计</th>
                        </tr>
                        <tr v-for="item in orderPreviewInfo.cartItemVOList">
                            <td v-text="item.productName" style="height:60px;line-height: 60px">图书名称</td>
                            <td>
                                <img :src="item.productImgsrc" alt="..."
                                     style="width: 60px;height: 60px; border-radius: 50%"/>
                            </td>
                            <td v-text="item.price" style="height:60px;line-height: 60px">图书单价</td>
                            <td v-text="item.quantity" style="height:60px;line-height: 60px">购买数量</td>
                            <td v-text="item.total" style="height:60px;line-height: 60px">图书小计</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <b> 总价(元): {{orderPreviewInfo.totalPrice}} </b>
                </div>

                <div class="col-md-6">
                    <button class="btn btn-success" @click.prevent="toOrder">提交订单</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">X</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增地址</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="provinceId">省</label>
                            <select v-model="provinceId" class="form-control" id="provinceId" placeholder="请选择省份"
                                    @change="provinceChanged">
                                <option value="-1">请选择省份</option>
                                <option v-for="p in provinceList" :value="p.id" v-text="p.name">A</option>
                                <!--                                <option value="">B</option>-->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="cityId">市</label>
                            <select v-model="cityId" class="form-control" id="cityId" placeholder="请选择城市"
                                    @change="cityChanged">
                                <option value="-1">请选择城市</option>
                                <option v-for="city in cityList" :value="city.id" v-text="city.name">A</option>
                                <!--                                <option value="">B</option>-->
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="areaId">区</label>
                            <select v-model="areaId" class="form-control" id="areaId" placeholder="请选择区域">
                                <option value="-1">请选择区域</option>
                                <option v-for="area in areaList" :value="area.id" v-text="area.name">A</option>
                                <!--                                <option value="">B</option>-->
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="detailAddress">详细地址</label>
                            <input v-model="detailAddress" type="text" class="form-control" id="detailAddress"
                                   placeholder="请输入详细地址">
                        </div>

                        <div class="form-group">
                            <label for="tel">手机号</label>
                            <input v-model="tel" type="text" class="form-control" id="tel" placeholder="请输入手机号">
                        </div>

                        <div class="form-group">
                            <label for="reciever">收件人姓名</label>
                            <input v-model="reciver" type="text" class="form-control" id="reciever"
                                   placeholder="请输入收件人">
                        </div>
                        <div class="form-group">
                            <label for="code">邮编</label>
                            <input v-model="emailCode" type="text" class="form-control" id="code" placeholder="请输入邮编">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input v-model="isDefault" type="checkbox" id="isDefault"> 是否默认
                            </label>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click.prevent="submitAddForm">保存</button>
                </div>
            </div>
        </div>
    </div>


</div>


<script>

    console.log("------orderPreview-----")

    let app = new Vue({
        el: "#app",
        data: {
            productIds: [],
            orderPreviewInfo: {
                cartItemVOList: [],
                totalPrice: '0.00'
            },
            provinceList: [],
            provinceId: -1,
            cityList: [],
            cityId: -1,
            areaList: [],
            areaId: -1,
            detailAddress: '',
            tel: '',
            reciver: '',
            emailCode: '',
            isDefault: '',
            addressList: [],
            selectedAddressId: -1
        }, methods: {
            initAddressList() {
                $.post("/address/getList", data => {
                    this.addressList = data;
                    for (let i = 0; i < this.addressList.length; i++) {
                        if (this.addressList[i].isDefault === "1") {
                            this.selectedAddressId = this.addressList[i].id;
                        }
                    }
                })
            },
            clearAddForm() {
                this.provinceId = -1;
                this.cityId = -1;
                this.areaId = -1;
                this.detailAddress = ''
                this.tel = ''
                this.reciver = ''
                this.emailCode = ''
                this.isDefault = ''
            },
            initOrderPreviewInfo() {
                $.post("/order/preview", {productIds: this.productIds}, data => {
                    this.orderPreviewInfo.cartItemVOList = data;
                })

            },
            initProvinceList() {
                $.post("/address/listByPid", {pid: 0}, data => {
                    this.provinceList = data;
                })
            },
            provinceChanged() {
                this.cityList = []
                this.cityId = -1
                this.areaList = []
                this.areaId = -1
                $.post("/address/listByPid", {pid: this.provinceId}, data => {
                    this.cityList = data;
                })
            },
            cityChanged() {
                this.areaList = []
                this.areaId = -1
                $.post("/address/listByPid", {pid: this.cityId}, data => {
                    this.areaList = data;
                })

            },
            submitAddForm() {
                let $provinceId = $("#provinceId option:selected");
                let $cityId = $("#cityId option:selected");
                let $areaId = $("#areaId option:selected");
                let provinceName = $provinceId.val() !== "-1" ? $provinceId.text() : "";
                let cityName = $cityId.val() !== "-1" ? $cityId.text() : "";
                let areaName = $areaId.val() !== "-1" ? $areaId.text() : "";
                let params = {
                    province: provinceName,
                    city: cityName,
                    area: areaName,
                    detailAddress: this.detailAddress,
                    tel: this.tel,
                    reciver: this.reciver,
                    emailCode: this.emailCode,
                    isDefault: this.isDefault ? "1" : "0"
                }
                $.post("/address/add", params,  (data)=> {
                    $("#myModal").modal("hide")
                    this.initAddressList()
                })
            },
            toOrder(){
                let addressId = $("select[name='address'] option:selected").val();
                if (addressId === "-1"){
                    alert("请选择地址")
                    return;
                }
                $.post("/order/addOrder",{addressId:addressId,productIds:this.productIds},data=>{
                    sessionStorage.setItem("orderId",data)
                    location.href='/myOrder.html'
                })
            }

        },
        created() {
            this.orderPreviewInfo.totalPrice = sessionStorage.getItem("total");
            let productIds = sessionStorage.getItem("toOrderPreview")
            this.productIds = JSON.parse(productIds);

            this.initOrderPreviewInfo()

            this.initProvinceList()

            this.initAddressList()
        }
    })

</script>


<div th:insert="foot.html"></div>


</body>
</html>